<template>
  <div>
    <div class="item">
      <div class="header">
        <span>描述</span>
      </div>
      <div class="content">
        <a-input v-model:value="props.nodeData.properties.remarks" :rows="3"  placeholder="请输入描述" style="width: 100%" @change="setProperties()"  />
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输入字段</span>
      </div>
      <div class="content">
        <div
          v-for="(item, index) in props.nodeData.properties.inputParams"
          :key="index"
          class="field-item"
          :style="{ cursor: item.field === 'history' ? 'default' : 'pointer' }"
          @click="item.field === 'history' ? undefined : handleField(item)"
        >
          <div class="name">
            <a-space>
              <span style="color: #ff4d4f" v-if="item.required === true">*</span>
               <span v-else>&nbsp;</span>
              <span>{{ item.field }}</span>
              <span style="color: rgb(153, 153, 153)">{{ item.name }}</span>
            </a-space>
          </div>
          <div class="action">
            <DeleteOutlined v-if="item.field !== 'history'&&item.field !== 'content'" class="icon" />
          
          </div>
        </div>
      </div>
    </div>
    <div class="item">
      <a-button type="primary" @click="handleAddField" style="width: 100%">添加字段</a-button>
    </div>
    <a-modal v-model:visible="fieldVisible" title="添加字段" @ok="handleFieldOk">
      <a-form :model="formFiled" name="basic">
        <a-form-item
          label="字段名称"
          name="field"
          :disabled="formFiled.field === 'content' ? true : false"
          :rules="[{ required: true, message: '请输入字段名称!' }]"
        >
          <a-input v-model:value="formFiled.field" :disabled="formFiled.field === 'content' ? true : false" placeholder="请输入字段名称" />
        </a-form-item>
        <a-form-item label="显示名称" name="name" :rules="[{ required: true, message: '请输入显示名称!' }]">
          <a-input v-model:value="formFiled.name" placeholder="请输入显示名称" />
        </a-form-item>
        <a-form-item label="字段类型" name="type">
          <a-radio-group v-model:value="formFiled.type" :disabled="formFiled.field === 'content' ? true : false">
            <a-radio :value="'string'">文本</a-radio>
            <a-radio :value="'number'">数字</a-radio>
            <a-radio :value="'picture'">图片</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="是否必填" name="required">
          <a-switch v-model:checked="formFiled.required" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch } from 'vue';
const props = defineProps({
  nodeData: Object,
  lf: Object || String,
  title: {
    type: String,
    default: '开始节点属性'
  }
});
const formFiled = reactive({
  field: '',
  name: '',
  type: 'string',
  required: true
});
const filedUpdate = ref(false);
const fieldVisible = ref(false);
const handleFieldOk = () => {
  fieldVisible.value = false;
  if (filedUpdate.value == true) {
    var item = props.nodeData.properties.inputParams.find(val => val.field === formFiled.field);
    if (item) {
      item.field = formFiled.field;
      item.name = formFiled.name;
      item.type = formFiled.type;
      item.required = formFiled.required;
    }
  } else {
    props.nodeData.properties.inputParams.push({
      field: formFiled.field,
      name: formFiled.name,
      type: formFiled.type,
      required: formFiled.required
    });
  }
  setProperties();
};

const handleAddField = () => {
  fieldVisible.value = true;
  filedUpdate.value = false;
  formFiled.field = '';
  formFiled.name = '';
  formFiled.type = 'string';
  formFiled.required = true;
};

const handleField = item => {
  formFiled.field = item.field;
  formFiled.name = item.name;
  formFiled.type = item.type;
  formFiled.required = item.required;
  fieldVisible.value = true;
  filedUpdate.value = true;
};
// const setProperties = () => {
//   var data = props.lf.getNodeModelById(props.nodeData.id);
//   props.nodeData.properties.options.categories.push({ category: '' });

//   props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
// };
const setProperties = () => {

  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
</script>
<style  lang='less' scoped>
.item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}
.field-item {
  margin-bottom: 8px;
  width: 100%;
  height: 32px;
  background-color: #f9f9f9;
  padding: 8px 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.field-item .icon {
  width: 22px;
  line-height: 1;
}
.field-item .name {
  flex: 1;
}
.field-item .action {
  width: 40px;
  text-align: right;
}
.field-item .action .icon:hover {
  color: red;
}
</style>